<template>
	<view class="content">
		<view class="headBg"></view>
		<view class="searchBox" @click="$navto.navto('/pages/goods_search/goods_search')">
			<input type="text" class="inputSearch" placeholder="请输入关键字" placeholder-class="placeholder" />
			<image :src="baseurl+'category/search.png'" class="searchIcon"></image>
		</view>
		<uni-swiper-dot :info="banner" :current="current" :mode="mode" :dots-styles="dotsStyles" @clickItem="clickItem">
			<swiper class="swiperBox" @change="change" :current="current" circular='true' autoplay="true" :interval="3000" :duration="1000">
				<swiper-item class="swiper-item" v-for="(item,index) in banner" :key="index">
					<image :src="item.url" class="itemImg"></image>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<view class="menuBox">
			<view class="menuItem" @click="$navto.navto('/bundle/pages/goods_seckill/goods_seckill')">
				<image :src="baseurl+'category/menu1.png'" class="menuIcon"></image>
				<text class="menuLabel">限时秒杀</text>
			</view>
			<view class="menuItem" @click="$navto.navto('/bundle/pages/goods_combination/goods_combination')">
				<image :src="baseurl+'category/menu5.png'" class="menuIcon"></image>
				<text class="menuLabel">超级拼团</text>
			</view>
			<view class="menuItem" @click="$navto.navto('/bundle/pages/integral_mall/integral_mall')">
				<image :src="baseurl+'category/menu2.png'" class="menuIcon"></image>
				<text class="menuLabel">积分商城</text>
			</view>
			<view class="menuItem" @click="$navto.navto('/pages/active_list/active_list')">
				<image :src="baseurl+'category/menu3.png'" class="menuIcon"></image>
				<text class="menuLabel">热销榜单</text>
			</view>
			<view class="menuItem" @click="$navto.navto('/pages/shop_street/shop_street')">
				<image :src="baseurl+'category/menu4.png'" class="menuIcon"></image>
				<text class="menuLabel">店铺明细</text>
			</view>

		</view>
		<view class="goodsBox">
			<view class="shopItem" v-for="(item,index) in shops" :key="index" @click="$navto.navto('/pages/store_index/store_index',{id:item.id})">
				<image :src="item.logo" class="logo"></image>
				<text class="name">{{item.name}}</text>
				<text class="onSell">{{item.on_sale_goods}}件商品</text>
			</view>
		</view>
		<view class="tabBarBox">
			<image src="@/static/tab/bg.png" class="tabbg"></image>
			<image src="@/static/tab/1.png" class="projectTab" @click="$redirectTo('/packageB/project/project')"></image>
			<image src="@/static/tab/2.png" class="associationTab"@click="$redirectTo('/packageB/association/association')"></image>
			<image src="@/static/tab/3.png" class="homeTab" @click="$redirectTo('/pages/index/index')"></image>
			<image src="@/static/tab/4s.png" class="mallTab" @click="$redirectTo('/packageB/category/category')"></image>
			<image src="@/static/tab/5.png" class="myTab" @click="$redirectTo('/pages/user/user')"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseurl: this.$baseurl,
				current: 0,
				mode: 'round',
				dotsStyles: {
					bottom: 10,
					border: '1px rgba(255, 255, 255, 1) solid',
					backgroundColor: 'grey',
					selectedBackgroundColor: '#478697',
					selectedBorder: '1px rgba(255, 255, 255, 1) solid'
				},
				banner: [],
				content: '',
				columnNumber: 2,
				page: 1,
				size: 20,
				list: [],
				columns: 2,
				shops:[]
			}
		},
		onShow() {},
		onLoad() {
			// this.$request.get(`Community/submit_status`).then(res => {
			// 	this.isTab = res.data.data;
			// })
			//获取商品数据
			// this.$request.get(`goods/getGoodsList`).then(res => {
			// 	console.log(res);
			// 	this.list = [];
			// 	this.list = res.data.data.lists;
			// })
			
			//获取店铺列表
			this.$request.get(`shop/getShopList`).then(res => {
				console.log(res);
				// this.list = [];
				this.shops = res.data.data.list;
			})
			
			//获取商品轮播
			this.$request.get(`CommunityBanner/community_banner_list?type=2`).then(res => {
				this.banner = res.data.data;
			})
		},
		onReachBottom() {
			console.log("加载更多");
		},
		onPullDownRefresh() {
			// this.load(true);
		},
		methods: {
			change(event){
				this.current=event.detail.current;
			},
			clickItem(e) {
				this.current = e
			},
			click(e) {
				console.log('点击内容', e)
			},
		}
	}
</script>

<style lang="scss">
	.goodsBox {
		position: relative;
		z-index: 10;
		margin-top: 55rpx;
		width: 670rpx;
		margin-left: 40rpx;
		border-radius: 15rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.shopItem{
			width: 320rpx;
			height: 410rpx;
			background: url('https://miantou.guguan.net/img/category/shopBg.png');
			background-size: 100% 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 25rpx;
			.logo{
				width: 110rpx;
				height: 110rpx;
				border-radius: 50%;
				border: 1rpx solid #8AC1D1;
				margin-top: 50rpx;
			}
			.name{
				width: 100%;
				text-align: center;
				font-size: 30rpx;
				font-weight: 700;
				margin-top: 50rpx;
			}
			.onSell{
				text-align: center;
				font-size: 20rpx;
				font-weight: 700;
				margin-top: 50rpx;
				background-color: #4E97AD;
				padding: 10rpx 20rpx 10rpx 20rpx;
				color: #fff;
				border-radius: 30rpx;
			}
		}
		.cover {
			border-radius: 15rpx 15rpx 0 0;
			width: 100%;
		}
	}

	.menuBox {
		position: relative;
		width: 660rpx;
		height: 135rpx;
		margin-top: 35rpx;
		overflow-x: scroll;
		display: flex;
		margin-left: 45rpx;
		justify-content: space-between;

		.menuItem {
			width: 100rpx;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;

			.menuIcon {
				width: 85rpx;
				height: 85rpx;
			}

			.menuLabel {
				width: 100%;
				font-size: 24rpx;
			}
		}
	}

	.swiperBox {
		width: 670rpx;
		height: 430rpx;
		margin-left: 40rpx;
		margin-top: 35rpx;

		.swiper-item,
		.itemImg {
			width: 100%;
			height: 386rpx;
			border-radius: 15rpx;
		}
	}

	::v-deep .placeholder {
		color: #fff;
	}

	.searchBox {
		position: relative;
		width: 453rpx;
		height: 64rpx;
		margin-left: 40rpx;
		margin-top: 100rpx;

		.searchIcon {
			position: absolute;
			width: 30rpx;
			height: 30rpx;
			left: 40rpx;
			top: 20rpx;
		}

		.inputSearch {
			width: 360rpx;
			height: 64rpx;
			border-radius: 32rpx;
			background-color: #8bb5c1;
			color: #fff;
			font-size: 20rpx;
			font-weight: 500;
			padding-left: 90rpx;
		}
	}

	.headBg {
		position: absolute;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 560rpx;
		background: url('https://miantou.guguan.net/img/category/headBg.jpg');
		background-size: 100% 100%;
	}

	.content {
		width: 100%;
		// height: calc(100vh - 150rpx);
		background-color: #fff;
		overflow-y: scroll;
		padding-bottom: 240rpx;
	}

	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}
</style>